<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{mall/header::head-fragment('瞬联商城-首页','index')}">
    <title></title></head>
<body>
<header th:replace="~{mall/header::header-fragment}"></header>
<content id="content">
    <nav th:replace="~{mall/header::nav-fragment}"></nav>
    <div id="banner">
        <!-- 商品分类列表 -->
        <div class="all-sort-list" >
            <!-- 遍历所有一级分类 -->
            <th:block th:each="category : ${categories}">
                <div class="item">
                    <h3>
                        <span>·</span>
                        <!-- 一级分类链接 -->
                        <a href="#" th:href="@{'/shopping/item/search?id=' + ${category.id}}">
                            <th:block th:text="${category.name}"></th:block>
                        </a>
                    </h3>
                    <!-- 一级分类的子菜单容器 -->
                    <div class="item-list clearfix">
                        <div class="subitem">
                            <!-- 二级分类菜单列表 -->
                            <ul class="menu-level category-level-2">
                                <!-- 遍历当前一级分类的所有二级分类 -->
                                <th:block th:each="childCategory : ${category.children}">
                                    <li class="category-item">
                                        <div class="category-link">
                                            <!-- 二级分类链接 -->
                                            <a href="#" th:href="@{'/shopping/item/search?id=' + ${childCategory.id}}">
                                                <th:block th:text="${childCategory.name}"></th:block>
                                            </a>
                                        </div>
                                        <!-- 三级及更深层级分类容器 -->
                                        <div th:if="${childCategory.children != null and !childCategory.children.isEmpty()}" 
                                             class="submenu">
                                            <ul class="menu-level category-level-3">
                                                <!-- 遍历当前分类的所有子分类 -->
                                                <th:block th:each="grandChild : ${childCategory.children}">
                                                    <li class="category-item">
                                                        <!-- 子分类链接 -->
                                                        <a href="#" th:href="@{'/shopping/item/search?id=' + ${grandChild.id}}">
                                                            <th:block th:text="${grandChild.name}"></th:block>
                                                        </a>
                                                        <!-- 如果还有更深层的子分类，则继续显示 -->
                                                        <div th:if="${grandChild.children != null and !grandChild.children.isEmpty()}" 
                                                             class="sub-submenu">
                                                            <ul class="menu-level category-level-4">
                                                                <th:block th:each="subChild : ${grandChild.children}">
                                                                    <li class="category-item">
                                                                        <a href="#" th:href="@{'/shopping/item/search?id=' + ${subChild.id}}">
                                                                            <th:block th:text="${subChild.name}"></th:block>
                                                                        </a>
                                                                        <!-- 继续显示更深层级 -->
                                                                        <div th:if="${subChild.children != null and !subChild.children.isEmpty()}" 
                                                                             class="sub-submenu">
                                                                            <ul class="menu-level category-level-5">
                                                                                <th:block th:each="deepChild : ${subChild.children}">
                                                                                    <li class="category-item">
                                                                                        <a href="#" th:href="@{'/shopping/item/search?id=' + ${deepChild.id}}">
                                                                                            <th:block th:text="${deepChild.name}"></th:block>
                                                                                        </a>
                                                                                    </li>
                                                                                </th:block>
                                                                            </ul>
                                                                        </div>
                                                                    </li>
                                                                </th:block>
                                                            </ul>
                                                        </div>
                                                    </li>
                                                </th:block>
                                            </ul>
                                        </div>
                                    </li>
                                </th:block>
                            </ul>
                        </div>
                    </div>
                </div>
            </th:block>
        </div>
        <!-- 首页轮播图 -->
        <div class="swiper-container fl">
            <div class="swiper-wrapper">
                <th:block >
                    <div class="swiper-slide">
                        <img th:src="@{/mall/image/swiper/banner01.jpg}" th:alt="@{/shopping/order}">
                    </div>
                    <div class="swiper-slide">
                        <img th:src="@{/mall/image/swiper/8esnf17m.png}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img th:src="@{/mall/image/swiper/6bsvn2xm.png}" alt="">
                    </div>
                </th:block>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <!-- 热销商品展示区域 -->
    <div id="sub_banner">
        <h2>热销商品</h2>
        <!-- 已配置热销商品则显示配置内容 -->
        <th:block th:unless="${#lists.isEmpty(hostItems)}">
            <th:block th:each="hostItem : ${hostItems}">
                <div class="hot-image">
                    <a th:href="@{'/shopping/detail/'+${hostItem.id}}">
                        <img th:src="@{${hostItem.pic}}" th:alt="${hostItem.name}">
                        <div class="name-overlay">
                            <p class="name" th:text="${hostItem.name}">NewBeeMall</p>
                            <span>￥</span> <p class="name" th:text="${hostItem.price}">NewBeeMall</p>
                        </div>
                    </a>
                </div>
            </th:block>
        </th:block>
        <!-- 未配置热销商品则显示默认 -->
        <th:block th:if="${#lists.isEmpty(hostItems)}">
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/r4.jpg}" alt="">
                    <div class="name-overlay">
                        <p class="name">热销商品1</p>
                    </div>
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/hot2.jpg}" alt="">
                    <div class="name-overlay">
                        <p class="name">热销商品2</p>
                    </div>
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/hot3.jpg}" alt="">
                    <div class="name-overlay">
                        <p class="name">热销商品3</p>
                    </div>
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/hot4.jpg}" alt="">
                    <div class="name-overlay">
                        <p class="name">热销商品4</p>
                    </div>
                </a>
            </div>
        </th:block>
    </div>
    <!-- 新品上市展示区域 -->
    <div id="flash">
        <h2>新品上市</h2>
        <ul>
            <!-- 已配置新品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(newItems)}">
                <th:block th:each="newItem : ${newItems}">
                    <div class="new-image">
                        <a th:href="@{'/shopping/detail/'+${newItem.id}}">
                            <img th:src="@{${newItem.pic}}" th:alt="${newItem.name}">
                            <div class="name-overlay">
                                <p class="name" th:text="${newItem.name}">NewBeeMall</p>
                                <span>￥</span><p class="name" th:text="${newItem.price}">NewBeeMall<</p>
                            </div>
<!--                            <p class="name" th:text="${newItem.name}">NewBeeMall</p>-->
<!--                            <p class="discount" th:text="${newItem.description}">NewBeeMall</p>-->
<!--                            <p class="item_price">￥<span th:text="${newItem.sellPrice}">NewBeeMall</span></p>-->
                        </a>
                    </div>
                </th:block>
            </th:block>
            <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(newItems)}">
                <div class="new-image">
                    <a href="##">
                        <img th:src="@{/mall/image/sub_banner/m6.jpg}" alt=""/>
                        <div class="name-overlay">
                            <p class="name">新品1</p>
                        </div>
                    </a>
                </div>
                <div class="new-image">
                    <a href="##">
                        <img th:src="@{/mall/image/sub_banner/headphones.jpg}" alt=""/>

                        <div class="name-overlay">
                            <p class="name">新品2</p>
                        </div>
                    </a>
                </div>
                <div class="new-image">
                    <a href="##">
                        <img th:src="@{/mall/image/sub_banner/pc.jpg}" alt=""/>


                        <div class="name-overlay">
                            <p class="name">新品3</p>
                        </div>
                    </a>
                </div>
                <div class="new-image">
                    <a href="##">
                        <img th:src="@{/mall/image/sub_banner/air.jpg}" alt=""/>


                        <div class="name-overlay">
                            <p class="name">新品3</p>
                        </div>
                    </a>
                </div>
                <div class="new-image">
                    <a href="##">
                        <img th:src="@{/mall/image/sub_banner/baby-car.jpg}" alt=""/>
                        <div class="name-overlay">
                            <p class="name">新品3</p>
                        </div>
                    </a>
                </div>

            </th:block>
        </ul>
    </div>
    <!-- 为你推荐展示区域 -->
    <div id="recommend">
        <h2>为你推荐</h2>
        <ul>
            <!-- 已配置推荐商品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(recommendItems)}">
                <th:block th:each="recommendItem : ${recommendItems}">
                    <li>
                        <a th:href="@{'item/detail/'+${recommendItem.id}}">
                            <img th:src="@{${recommendItem.image}}" th:alt="${recommendItem.name}">
                            <p class="name" th:text="${recommendItem.name}">NewBeeMall</p>
                            <p class="item_price">￥<span th:text="${recommendItem.sellPrice}">NewBeeMall</span></p>
                            <p class="counter">猜你喜欢</p>
                            <div class="comment">
                                <p> 买得起精选</p>
                                <p>好物也可以不贵</p>
                            </div>
                        </a>
                    </li>
                </th:block>
            </th:block>
            <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(recommendItems)}">
                <li th:each="i : ${#numbers.sequence(0,9)}">
                    <a href="##">
                        <div class="info discount" th:switch="${i}">
                            <span th:case="0">新品</span>
                            <span th:case="1">5折起</span>
                            <span th:case="2">新品</span>
                            <span th:case="3">官降</span>
                            <span th:case="4">新品</span>
                            <span th:case="5">热销</span>
                            <span th:case="6">享折扣</span>
                            <span th:case="7">最低价</span>
                            <span th:case="8">热销</span>
                            <span th:case="9">热销</span>
                        </div>
                        <img th:src="@{/mall/image/sub_banner/r1.jpg}" alt=""/>
                        <p class="name">华为平板 M6</p>
                        <p class="price">￥1499</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p> 买得起精选</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
            </th:block>
        </ul>
    </div>
</content>
<div th:replace="~{mall/footer::footer-fragment}"></div>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/mall/js/swiper-bundle.min.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert2/sweetalert2.all.min.js}"></script>
<script th:src="@{/mall/js/index.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script>
    // 页面加载时初始化 window.currentUserId，方便后续访问
    window.currentUserId = localStorage.getItem("currentUserId");
</script>
<script>

</script>


</body>


</html>